<!-- 提货专区提货栏 -->
<template>
	<view class="container mall__page">
		<uni-nav-bar statusBar="true" fixed="true" @clickLeft="goBack" leftIcon="back" :rightText="editType?'完成':'编辑'" @clickRight="edit">
			<view class="navTitle">
				<text class="title">VIP提货栏</text>
				<view class="address" v-if="addressData">
					<image src="../../static/images/index/index_location.png" mode=""></image>
					<text @tap="chooseAddress">送达：{{addressData.detail}}</text>
				</view>
			</view>
		</uni-nav-bar>
		<view class="cut"></view>
		<!-- 空白页 -->
		<view v-if="empty===true" class="empty">
			<image class="empty-image" src="../../static/images/public/no-bill.png" mode="aspectFit"></image>
			<view class="empty-tips">
				空空如也
			</view>
		</view>
		<view v-else>
			<!-- 列表 -->
			<view class="cart-list">
				<view class="label">
					<text class="a">您有{{card_value}}提货卡需一次性完成提货</text>
					<text class="b">详情</text>
				</view>
				<block v-for="(items, index) in cartList" :key="index">
					<view class="cart-item">
						<view class="shopTitle">
							<image class="check selected" v-show="items.allChecked" src="../static/images/selected.png" mode="aspectFit"
							 @tap.stop="check('store',index)"></image>
							 <view class="check" v-show="!items.allChecked" @tap.stop="check('store',index)"></view>
							<view class="labelSelf" v-if="items.seller_info.seller_type == 2">自营</view>
							<!-- <image class="lebal" src="../static/images/store.png" mode="aspectFit" v-else></image> -->
							<text class="seller_name">{{items.seller_info.online_name}}</text>
							<!-- <text class="yticon icon-you"></text> -->
						</view>
						<view class="goodsList">
							<view class="goodsItem" v-for="(item,idx) in items.seller_info.goods_list" :key="idx" @tap="goGoods(item.product_id)">
								<view class="image-wrapper">
									<image class="check checked" v-show="item.is_checked == 1" src="../static/images/selected.png" @tap.stop="check('item',index,idx,item.id)"></image>
									<view class="check" v-show="item.is_checked == 0" @tap.stop="check('item',index,idx,item.id)"></view>
									<image class="img" :src="item.productInfo.image" :class="[item.loaded]" mode="aspectFill" lazy-load @load="onImageLoad(index, idx)"
									 @error="onImageError(index, idx)"></image>
								</view>
								<view class="item-right" v-if="">
									<text class="clamp2 title">{{item.productInfo.store_name}}</text>
									<text class="attr" v-if="item.productInfo.attrInfo">规格 : {{item.productInfo.attrInfo.suk||''}}</text>
									<text class="attr" v-else>规格 : 无</text>
									<text class="attr" v-if="item.productInfo.take_product_type == 1">类型 : 黄色提货卡</text>
									<text class="attr" v-if="item.productInfo.take_product_type == 2">类型 : 红色提货卡</text>
									<text class="attr" v-if="item.productInfo.take_product_type == 3">类型 : 蓝色提货卡</text>
									<view class="price">
										<text class="price-text">{{item.productInfo.attrInfo?item.productInfo.attrInfo.price:item.productInfo.price}}</text>
									</view>
									<uni-number-box v-if="item.productInfo.attrInfo" class="uni-number-box" :min="1" :max="item.productInfo.attrInfo.stock"
									 :value="item.cart_num" :isMax="item.cart_num>=item.productInfo.attrInfo.stock?true:false" :isMin="item.cart_num===1"
									 :cartId="item.id" @eventChange="numberChange($event,index,idx)"></uni-number-box>
									<uni-number-box v-else class="uni-number-box" :min="1" :max="item.productInfo.stock" :value="item.cart_num"
									 :isMax="item.cart_num>=item.productInfo.stock?true:false" :isMin="item.cart_num===1" :cartId="item.id"
									 @eventChange="numberChange($event,index,idx)"></uni-number-box>
								</view>
								<!-- <text class="del-btn yticon icon-fork" @click="deleteCartItem(idx)"></text> -->
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<!-- 底部菜单栏 -->
		<view class="action-section">
			<view class="checkbox">
				<image v-show="allChecked" class="checkbox-img selected" src="../static/images/selected.png" mode="aspectFit"
				 @click="check('all')"></image>
				 <view class="checkbox-img" v-show="!allChecked" @tap.stop="check('all')"></view>
				<text class="checkbox-text">
					合计：{{total}}
				</text>
			</view>
			<view class="right">
				<view class="total-box" v-if="!editType">
				</view>
				<view v-if="!editType" type="primary" class="no-border confirm-btn" @click="createOrder">立即提货</view>
				<view v-else type="primary" class="no-border delete-btn" @click="deleteAll">删除</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		takeCartList,
		takeCartChecked,
		takeCartNum,
		takeCartDel,
		addressList
	} from '@/api/mall.js'
	import {
		deliveryCard
	} from '@/api/user.js'
	import utils from "@/common/utils.js"
	import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue'
	export default {
		components: {
			uniNumberBox
		},
		data() {
			return {
				addressData: {
					id: ""
				},
				card_value: "",
				editType: false,
				total: 0, //总价格
				totalNum: 0, //总数量
				allChecked: false, //全选状态  true|false
				empty: false, //空白页现实  true|false
				cartList: [],
				selectIds: [],
			};
		},
		onLoad() {
			addressList().then(res => {
				let is_default_num = 0
				res.data.forEach((item,index) => {
					if(item.is_default) {
						this.addressData = item
						is_default_num++
					}
				})
				if(is_default_num == 0&&res.data.length != 0) {
					this.addressData = res.data[0]
				}
			})
		},
		onShow() {
			if (uni.getStorageSync("cardId") != 0) {
				this.type = 0
			} else {
				this.type = 1
			}
			this.loadData();
			deliveryCard({
				type: this.type,
				card_id: uni.getStorageSync("cardId"),
				order_id: uni.getStorageSync("card_order_id")||''
			}).then(res => {
				if (res.data.cardInfo.name) {
					this.card_value = Number(res.data.cardInfo.card_value)
				}
			})
		},
		watch: {
			//显示空白页
			cartList(e) {
				let empty = e.length === 0 ? true : false;
				if (this.empty !== empty) {
					this.empty = empty;
				}
			}
		},
		methods: {
			goBack() {
				uni.navigateBack({
					
				})
			},
			//请求数据
			async loadData() {
				takeCartList().then(res => {
					uni.hideLoading()
					this.cartList = res.data.valid;
					this.storeCheck()
					this.allCheck()
					this.calcTotal(); //计算总价
				})
			},
			edit() {
				this.editType = !this.editType
			},
			chooseAddress() {
				uni.navigateTo({
					url:"/mall/my/address?back=1"
				})
			},
			//监听image加载完成
			onImageLoad(index, idx) {
				this.$set(this.cartList[index].seller_info.goods_list[idx], 'loaded', 'loaded')
			},
			//监听image加载失败
			onImageError(index, idx) {
				this.cartList[index].seller_info.goods_list[idx].image = '/static/errorImage.jpg';
			},
			navToLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			storeCheck() {
				this.cartList.forEach((items, index) => {
					let i = 0
					items.seller_info.goods_list.forEach((items, idx) => {
						if (items.is_checked == 0) {
							i++
						}
					})
					if (i == 0) {
						this.cartList[index].allChecked = true
					} else {
						this.cartList[index].allChecked = false
					}
				})
			},
			allCheck() {
				let i = 0
				this.cartList.forEach(items => {
					items.seller_info.goods_list.forEach(item => {
						if (item.is_checked == 0) {
							i++
						}
					})

				})
				if (i == 0) {
					this.allChecked = true
				} else {
					this.allChecked = false
				}
			},
			//选中状态处理
			check(type, index, idx, ids) {
				if (type === 'item') {
					if (this.cartList[index].seller_info.goods_list[idx].is_checked == 1) {
						this.cartList[index].seller_info.goods_list[idx].is_checked = 0
						this.getCartChecked(ids, 0)
					} else {
						this.cartList[index].seller_info.goods_list[idx].is_checked = 1
						this.getCartChecked(ids, 1)
					}
					this.storeCheck()
					this.allCheck()
				} else if (type === 'store') {
					if (this.cartList[index].allChecked == 1) {
						this.cartList[index].allChecked = 0
						let ids = []
						this.cartList[index].seller_info.goods_list.forEach((item, ind) => {
							if (item.is_checked == 1) {
								ids.push(item.id)
								this.cartList[index].seller_info.goods_list[ind].is_checked = 0
							}
						})
						this.getCartChecked(ids, 0)
					} else {
						this.cartList[index].allChecked = 1
						let ids = []
						this.cartList[index].seller_info.goods_list.forEach((item, ind) => {
							if (item.is_checked == 0) {
								ids.push(item.id)
								this.cartList[index].seller_info.goods_list[ind].is_checked = 1
							}
						})
						this.getCartChecked(ids, 1)
					}
					this.allCheck()
				} else {
					if (this.allChecked) {
						this.allChecked = false
						let ids = []
						this.cartList.forEach((items, inde) => {
							items.seller_info.goods_list.forEach((item, ind) => {
								if (item.is_checked == 1) {
									ids.push(item.id)
									this.cartList[inde].seller_info.goods_list[ind].is_checked = 0
								}
							})
						})
						this.storeCheck()
						this.getCartChecked(ids, 0)
					} else {
						this.allChecked = true
						let ids = []
						this.cartList.forEach((items, inde) => {
							items.seller_info.goods_list.forEach((item, ind) => {
								if (item.is_checked == 0) {
									ids.push(item.id)
									this.cartList[inde].seller_info.goods_list[ind].is_checked = 1
								}
							})
						})
						this.storeCheck()
						this.getCartChecked(ids, 1)
					}
				}
				this.calcTotal();
			},
			// 选中/取消选中接口
			getCartChecked(ids, checked) {
				takeCartChecked({
					cart_ids: ids,
					is_checked: checked,
				}).then(res => {
				})
			},
			//数量
			numberChange(e, index, idx) {
				takeCartNum({
					id: e.cartId,
					number: e.number
				}).then(res => {
					this.cartList[index].seller_info.goods_list[idx].cart_num = e.number;
					this.calcTotal();
				})
			},
			indexOf(arr, val) {
				for (var i = 0; i < arr.length; i++) {
					if (arr[i] == val) return i;
				}
				return -1;
			},
			// 去店铺
			goStore(id) {
				uni.navigateTo({
					url: `/mall/product/onlineStore?id=${id}`
				})
			},
			// 去商品详情
			goGoods(id) {
				uni.navigateTo({
					url: `/mall/pickCardMall/pickCardCart?id=${id}`
				})
			},
			//删除
			deleteCart(ids) {
				let _this = this
				uni.showLoading({
					mask:true
				})
				takeCartDel({
					ids: ids
				}).then(res => {
					_this.loadData()
				})
			},
			deleteAll() {
				let _this = this
				uni.showModal({
					content: "确定删除？",
					confirmColor: "#FB3737",
					success(res) {
						if (res.confirm) {
							let ids = []
							_this.cartList.forEach((items, index) => {
								items.seller_info.goods_list.forEach((item, idx) => {
									if (item.is_checked == 1) {
										ids.push(item.id)
									}
								})
							})
							_this.deleteCart(ids)
						}
					}
				})
			},
			//计算总价和总数量
			calcTotal() {
				let list = this.cartList;
				if (list.length === 0) {
					this.empty = true
					this.total = 0
					this.totalNum = 0
					return;
				}
				let total = 0;
				let totalNum = 0;
				let checked = true;
				list.forEach(items => {
					items.seller_info.goods_list.forEach(item => {
						if (item.is_checked === 1) {
							if (item.productInfo.attrInfo) {
								total += Number(item.productInfo.attrInfo.price) * item.cart_num;
							} else {
								total += Number(item.productInfo.price) * item.cart_num;
							}
							totalNum += item.cart_num;
						}
					})
				})
				this.total = Number(total.toFixed(2));
				this.totalNum = totalNum;
			},
			//创建订单
			createOrder() {
				if (this.cartList.length == 0) {
					uni.showToast({
						title: "请先添加提货商品",
						icon: "none",
						mask: false,
						duration: 500
					});
				} else {
					let _this = this
					this.cartList.forEach(items => {
						items.seller_info.goods_list.forEach(item => {
							if (item.is_checked == 1) {
								_this.selectIds.push(item.id)
							}
						})
					})
					if (_this.selectIds.length) {
						uni.navigateTo({
							url: "/mall/pickCardMall/pickCardCreateOrder?cartId=" + _this.selectIds + "&addressId=" + this.addressData.id
						})
					} else {
						uni.showToast({
							title: "请先选择提货商品",
							icon: "none",
							mask: false,
							duration: 500
						});
					}
				}
			}
		},
	}
</script>
<style lang='scss' scoped>
	.container {
		/* #ifdef MP-WEIXIN */
		padding-bottom:calc(env(safe-area-inset-bottom) + 140rpx);
		/* #endif */
		/* #ifdef APP-PLUS */
		padding-bottom:220rpx;
		/* #endif */
		.navTitle {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			line-height: 30rpx;
		
			.title {
				font-size: 34rpx;
			}
		
			.address {
				display: flex;
				align-items: center;
				margin-top: 6rpx;
				font-size: 24rpx;
				color: #999;
				image{
					margin-right: 4rpx;
					width: 14rpx;
					height: 22rpx;
				}
			}
		}
		.cut {
			position: relative;
			z-index: 1;
			width: 750rpx;
			height: 10rpx;
			background: rgba(247, 247, 247, 1);
		}

		/* 空白页 */
		.empty {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100vh;
			padding-bottom: 100rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			background: #fff;

			.empty-image {
				width: 240rpx;
				height: 160rpx;
				margin-bottom: 30rpx;
			}

			.empty-tips {
				display: flex;
				font-size: $uni-font-size-sm+2rpx;
				color: $font-color-disabled;

				.navigator {
					color: $mall-color-pri;
					margin-left: 16rpx;
				}
			}
		}
	}
	.label{
		margin: 20rpx auto 0;
		padding: 0 30rpx;
		box-sizing: border-box;
		width: 690rpx;
		height: 60rpx;
		background: #FFFDF5;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		color: #9D998B;
		.b{
			color: #FBCD31;
		}
	}
	/* 购物车列表项 */
	.cart-item {
		padding: 0 30rpx;

		.shopTitle {
			display: flex;
			height: 100rpx;
			align-items: center;
			border-bottom: 1rpx solid #F4F4F4;

			.check {
				border-radius: 20rpx;
				box-sizing: border-box;
				border: 1rpx solid #eee;
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}

			.selected {
				border: none;
			}
			.labelSelf{
				font-size: 24rpx;
				color: #fff;
				font-weight: 500;
				background-color: $mall-price;
				padding: 6rpx 14rpx;
				border-radius: 30rpx;
				margin-right: 20rpx;
			}
			.lebal {
				margin-right: 20rpx;
				width: 58rpx;
				height: 44rpx;
			}

			.seller_name {
				font-size: 32rpx;
				font-weight: 600;
				color: rgba(51, 51, 51, 1);
			}

			.icon-you {
				margin-top: 4rpx;
				margin-left: 10rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.goodsList {
			.goodsItem {
				display: flex;
				justify-content: space-between;
				padding: 30rpx 0;
				border-bottom: 1rpx solid #F4F4F4;

				.image-wrapper {
					display: flex;
					justify-content: space-between;
					width: 226rpx;
					flex-shrink: 0;

					.check {
						margin-top: 63rpx;
						width: 40rpx;
						height: 40rpx;
						box-sizing: border-box;
						border: 1rpx solid #eee;
						border-radius: 20rpx;
					}

					.img {
						width: 166rpx;
						height: 166rpx;
						border-radius: 10rpx;
					}

					.checked {
						border: none;
					}
				}

				.item-right {
					width: 430rpx;
					display: flex;
					flex-direction: column;
					position: relative;

					.title {
						font-size: 32rpx;
						color: #333;
						height: 80rpx;
						line-height: 40rpx;
						width: 100%;
					}

					.attr {
						margin-top: 10rpx;
						font-size: 28rpx;
						color: #999;
					}

					.price {
						margin-top: 10rpx;
						color: $mall-price;
						font-weight: 500;
						font-size: 40rpx;
						&:after{
							content: ' 点';
							font-size: 24rpx;
							font-weight: 500;
						}
					}
				}
			}
		}


	}

	/* 底部栏 */
	.action-section {
		box-sizing: border-box;
		position: fixed;
		justify-content: space-between;
		left: 0;
		bottom: 0;
		padding: 30rpx 30rpx 30rpx;
		padding: 30rpx 30rpx calc(env(safe-area-inset-bottom) + 30rpx);
		z-index: 95;
		display: flex;
		align-items: center;
		width: 100%;
		background: #fff;
		box-shadow:-1rpx -5rpx 4rpx 0px rgba(51,51,51,0.05);

		.checkbox {
			height: 40rpx;
			display: flex;

			.checkbox-img {
				border-radius: 20rpx;
				box-sizing: border-box;
				border: 1rpx solid #eee;
				width: 40rpx;
				height: 100%;
				margin-right: 14rpx;
			}

			.selected {
				border: none;
			}

			.checkbox-text {
				line-height: 40rpx;
				font-size: 32rpx;
				&::after{
					content: " 点";
					font-size: 24rpx;
				}
			}
		}

		.right {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.total-box {
				margin-right: 20rpx;
				flex: 1;
				display: flex;
				font-size: 28rpx;

				.total {
					margin-right: 6rpx;
					color: #333;
				}

				.price {
					font-weight: bold;
					color: #FB3737;
				}
			}

			.confirm-btn {
				width: 250rpx;
				height: 80rpx;
				background: linear-gradient(90deg, #FBCC2B 0%, #FBDC72 100%);
				border-radius: 40rpx;
				line-height: 80rpx;
				font-size: 32rpx;
				font-weight: 500;
				text-align: center;
				color: #333;
			}

			.delete-btn {
				width: 250rpx;
				height: 80rpx;
				box-sizing: border-box;
				background-color: #fff;
				border: 1rpx solid #FBDC72;
				border-radius: 40rpx;
				line-height: 80rpx;
				font-size: 32rpx;
				font-weight: 500;
				text-align: center;
				color: #FBCC2B;
			}
		}
	}
</style>
